<template>
	<view class="page">
		<!-- 提现表单区域 -->
		<view class="withdraw-form-section">
			<!-- 账户余额 -->
			<view class="balance-row">
				<text class="balance-label">账户余额</text>
				<text class="balance-amount">¥{{currentBalance}}</text>
			</view>
			
			<!-- 提现表单 -->
			<view class="form-content">
				<view class="form-item">
					<text class="form-label">提现金额</text>
					<view class="input-group">
						<input 
							class="form-input" 
							type="text" 
							v-model="withdrawAmount" 
							placeholder="请输入提现金额"
							@input="onAmountInput"
						/>
						<text class="input-unit">元</text>
					</view>
				</view>
				
				<view class="form-item">
					<text class="form-label">真实姓名</text>
					<input 
						class="form-input" 
						type="text" 
						v-model="realName" 
						placeholder="请输入真实姓名"
					/>
				</view>
				
				<view class="form-item">
					<text class="form-label">请选择银行</text>
					<picker 
						mode="selector" 
						:value="bankIndex" 
						:range="bankList" 
						@change="onBankChange"
					>
						<view class="select-group">
							<text class="select-text" :class="{ 'placeholder': !selectedBank }">{{selectedBank || '请选择银行'}}</text>
							<image src="/static/withdraw-img/收起箭头小.png" class="select-arrow"></image>
						</view>
					</picker>
				</view>
				
				<view class="form-item">
					<text class="form-label">请输入银行卡号</text>
					<input 
						class="form-input" 
						type="text" 
						v-model="bankCard" 
						placeholder="请输入银行卡号"
					/>
				</view>
			</view>
			
			<!-- 安全提示 -->
			<text class="security-tip1">平台不会通过任何渠道泄露您的个人信息,请放心填写</text>
			
			<!-- 确认按钮 -->
			<view class="submit-btn" @click="submitWithdraw">
				<text class="submit-text">确认信息并提交</text>
			</view>
		</view>
		
		<!-- 提现记录区域 -->
		<view class="withdraw-records-section">
			<text class="records-title">提现记录</text>
			<view class="records-list">
				<view 
					class="record-item" 
					v-for="(item, index) in withdrawRecords" 
					:key="index"
					@click="viewRecordDetail(item)"
				>
					<view class="record-left">
						<text class="record-type">商家提现申请</text>
						<text class="record-time">{{item.timeLabel}}:{{item.time}}</text>
					</view>
					<view class="record-right">
						<text class="record-amount">- {{item.amount}}</text>
						<text class="record-status" :class="item.statusClass">{{item.status}}</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentBalance: 1500.00,
				withdrawAmount: '',
				realName: '',
				selectedBank: '',
				bankCard: '',
				bankIndex: 0,
				bankList: ['中国工商银行', '中国建设银行', '中国农业银行', '中国银行'],
				withdrawRecords: [
					{
						timeLabel: '核销时间',
						time: '2022-10-12 11:09',
						amount: '100.00',
						status: '审核中',
						statusClass: 'status-pending'
					},
					{
						timeLabel: '核销时间',
						time: '2022-10-10 15:30',
						amount: '200.00',
						status: '审核通过',
						statusClass: 'status-success'
					},
					{
						timeLabel: '核销时间',
						time: '2022-10-08 09:15',
						amount: '150.00',
						status: '审核不通过',
						statusClass: 'status-failed'
					}
				]
			}
		},
		methods: {
			// 金额输入
			onAmountInput(e) {
				let value = e.detail.value;
				// 只允许数字和小数点
				value = value.replace(/[^\d.]/g, '');
				// 只允许一个小数点
				const parts = value.split('.');
				if (parts.length > 2) {
					value = parts[0] + '.' + parts.slice(1).join('');
				}
				// 小数点后最多两位
				if (parts.length === 2 && parts[1].length > 2) {
					value = parts[0] + '.' + parts[1].substring(0, 2);
				}
				this.withdrawAmount = value;
			},
			// 银行选择
			onBankChange(e) {
				this.bankIndex = e.detail.value;
				this.selectedBank = this.bankList[e.detail.value];
			},
			// 提交提现申请
			submitWithdraw() {
				if (!this.validateForm()) {
					return;
				}
				
				uni.showModal({
					title: '确认提现',
					content: `提现金额：¥${this.withdrawAmount}\n银行卡：${this.selectedBank}\n卡号：${this.bankCard}`,
					success: (res) => {
						if (res.confirm) {
							// 跳转到成功页面
							uni.navigateTo({
								url: '/pages/wjq/withdraw/success'
							});
						}
					}
				});
			},
			// 表单验证
			validateForm() {
				if (!this.withdrawAmount) {
					uni.showToast({
						title: '请输入提现金额',
						icon: 'none'
					});
					return false;
				}
				
				if (parseFloat(this.withdrawAmount) <= 0) {
					uni.showToast({
						title: '提现金额必须大于0',
						icon: 'none'
					});
					return false;
				}
				
				if (parseFloat(this.withdrawAmount) > this.currentBalance) {
					uni.showToast({
						title: '提现金额不能超过账户余额',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.realName) {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.selectedBank) {
					uni.showToast({
						title: '请选择银行',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.bankCard) {
					uni.showToast({
						title: '请输入银行卡号',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			},
			// 重置表单
			resetForm() {
				this.withdrawAmount = '';
				this.realName = '';
				this.selectedBank = '';
				this.bankCard = '';
			},
			// 查看记录详情
			viewRecordDetail(item) {
				uni.showToast({
					title: `查看${item.status}记录详情`,
					icon: 'none'
				});
			}
		}
	}
</script>

<style>
	.page {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 20rpx;
	}
	
	/* 提现表单区域 */
	.withdraw-form-section {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.balance-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
		margin-bottom: 30rpx;
	}
	
	.balance-label {
		font-size: 28rpx;
		color: #333;
	}
	
	.balance-amount {
		font-size: 36rpx;
		font-weight: bold;
		color: #FF9500;
	}
	
	.form-content {
		margin-bottom: 30rpx;
	}
	
	.form-item {
		margin-bottom: 30rpx;
	}
	
	.form-item:last-child {
		margin-bottom: 0;
	}
	
	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
		display: block;
	}
	
	.form-input {
		width: 100%;
		height: 80rpx;
		border: 2rpx solid #E5E5E5;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
	}
	
	.input-group {
		display: flex;
		align-items: center;
		border: 2rpx solid #E5E5E5;
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.input-group .form-input {
		flex: 1;
		border: none;
		border-radius: 0;
	}
	
	.input-unit {
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #666;
		background-color: #f8f8f8;
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.select-group {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		border: 2rpx solid #E5E5E5;
		border-radius: 10rpx;
		padding: 0 20rpx;
		background-color: white;
	}
	
	.select-text {
		font-size: 28rpx;
		color: #333;
	}
	
	.select-text.placeholder {
		color: #999;
	}
	
	.select-arrow {
		width: 20rpx;
		height: 20rpx;
		transform: rotate(90deg);
	}
	
	.security-tip1 {
		font-size: 22rpx; 
		color: #999;
		margin-bottom: 40rpx;
		text-align: center;
		display: block;
		width: 100%;
	}
	
	.submit-btn {
		width: 100%;
		height: 80rpx;
		background-color: #007AFF;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.submit-text {
		font-size: 32rpx;
		color: white;
		font-weight: bold;
	}
	
	/* 提现记录区域 */
	.withdraw-records-section {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.records-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		display: block;
	}
	
	.records-list {
		
	}
	
	.record-item {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.record-item:last-child {
		border-bottom: none;
	}
	
	.record-left {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.record-type {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.record-time {
		font-size: 24rpx;
		color: #999;
	}
	
	.record-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-left: 20rpx;
	}
	
	.record-amount {
		font-size: 32rpx;
		font-weight: bold;
		color: #FF9500;
		margin-bottom: 8rpx;
	}
	
	.record-status {
		font-size: 24rpx;
	}
	
	.status-pending {
		color: #999;
	}
	
	.status-success {
		color: #34C759;
	}
	
	.status-failed {
		color: #FF3B30;
	}
</style>